<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button type="primary" icon="el-icon-plus" @click="add">提现</el-button>
            </div>
            <div class="right-panel">
                <div class="right-panel-search">
                    <el-select v-model="search.status" placeholder="提现状态" clearable>
                        <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                    <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="list.apiObj" row-key="id" :remoteSummary="true" stripe>
                <el-table-column label="#ID" prop="id" width="50"></el-table-column>
                <el-table-column label="提现时间" prop="create_time" width="300"></el-table-column>
                <el-table-column label="提现金额" prop="amount" width="150"></el-table-column>
                <el-table-column label="备注" prop="remark" width="250"></el-table-column>
                <el-table-column label="状态" prop="status_str" width="100">
                    <template #default="scope">
                        <el-tag type="warning" v-if="scope.row.status == 1">{{ scope.row.status_text }}</el-tag>
                        <el-tag type="success" v-else-if="scope.row.status == 10">{{ scope.row.status_text }}</el-tag>
                        <el-tag type="info" v-else-if="scope.row.status == 2">{{ scope.row.status_text }}</el-tag>
                        <el-tag v-else>{{ scope.row.status_text }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="拒绝原因" prop="reject_reason" width="250"></el-table-column>
                <el-table-column label="操作" fixed="right" align="right" width="280">
                    <template #default="scope">
                        <el-button-group>
                            <el-button text type="primary" size="small" @click="approval(scope.row, scope.$index)"
                                v-if="scope.row.status == 1">审批</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>

            </scTable>
        </el-main>
    </el-container>

    <save-dialog v-if="dialog.save" ref="saveDialog" draggable @success="onSaveSuccess"
        @closed="dialog.save = false"></save-dialog>
    <approval-dialog v-if="dialog.approval" ref="approvalDialog" draggable @success="onSaveSuccess"
        @closed="dialog.approval = false"></approval-dialog>

</template>

<script>
import saveDialog from './save'
import approvalDialog from './approval'

export default {
    name: 'role',
    components: {
        saveDialog,
        approvalDialog
    },
    data () {
        return {
            dialog: {
                save: false,
                approval: false
            },
            list: {
                apiObj: this.$API.app.withdrawal.list,
            },
            status: [
                { label: "提现中", value: 1 },
                { label: "拒绝提现", value: 2 },
                { label: "提现成功", value: 10 },
            ],
            exportLoading: false,
            search: {
                status: "",
                keyword: null
            }
        }
    },
    methods: {
        //添加
        add () {
            this.$API.app.department.detail.get('me').then(res => {
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open().setData(res.data);
                })
            }).catch(res => {
                console.log(res);

            })
        },

        approval (row) {
            this.$API.app.withdrawal.detail.get(row.id).then(res => {
                this.dialog.approval = true
                this.$nextTick(() => {
                    this.$refs.approvalDialog.open().setData(res.data);
                })
            })
        },

        //搜索
        upsearch () {
            this.$refs.table.upData(this.search);
        },

        exportList () {
            this.downloadFile(this.list.apiObj, '活动列表-' + (new Date()).getTime(), Object.assign(this.search, { action: 'export' }))
        },
        downloadFile (apiObj, fileName, data = {}) {
            this.downLoading = true
            var _this = this
            console.log(fileName)
            apiObj.get(data, {
                responseType: 'blob',
                onDownloadProgress (e) {
                    if (e.lengthComputable) {
                        _this.downLoadProgress = parseInt(e.loaded / e.total * 100)
                    }
                }
            }).then(res => {
                this.downLoading = false
                this.downLoadProgress = 0
                let url = URL.createObjectURL(res);
                let a = document.createElement("a")
                a.style = "display: none"
                a.target = "_blank"
                a.download = fileName + ".xls"
                a.href = url
                document.body.appendChild(a)
                a.click()
                document.body.removeChild(a)
                URL.revokeObjectURL(url)
            }).catch(err => {
                this.downLoading = false
                this.downLoadProgress = 0
                this.$notify.error({
                    title: '下载文件失败',
                    message: err
                })
            })
        },


        summaryMethod () {
            return { num: 1, num2: 2 }
        },

        onSaveSuccess () {
            this.dialog.save = false;
            this.refresh();
        },
        //本地更新数据
        refresh () {
            this.$refs.table.refresh()
        }
    }
}
</script>

<style></style>
